<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>登陆</title>
		<link th:replace="common/header"/>
		<link rel="stylesheet" th:href="@{/css/tip.css}"/>
		<script type="text/javascript" th:src="@{/js/layer/tip.js}"></script>
	</head>

	<body class="login-layout">
		<div class="main-container">
			<div class="main-content">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container">
							<div class="center">
								<h1>
									<i class="ace-icon fa fa-leaf green"></i>
									<span class="red">房屋</span>
									<span class="white" id="id-text2">管理系统</span>
								</h1>
								<h4 class="blue" id="id-company-text">&copy; 房产局</h4>
							</div>

							<div class="space-6"></div>

							<div class="position-relative">
								<div id="login-box" class="login-box visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header blue lighter bigger">
												<i class="ace-icon fa fa-coffee green"></i>
												请输入您的登录信息
											</h4>

											<div class="space-6"></div>

											<form id="loginform" class="form-vertical" th:action="@{/login}" action="" method="post">
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" id="loginusername" name="username" placeholder="用户名" />
															<i class="ace-icon fa fa-user"></i>
														</span>
													</label>
													
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" id="loginpassword" name="password" placeholder="密码" />
															<i class="ace-icon fa fa-lock"></i>
														</span>
													</label>
													<span th:text="${msg}"></span>
													<div class="space"></div>

													<div class="clearfix">
														<label class="inline">
															<input type="checkbox" class="ace" id="rememberMe" name="rememberMe" />
															<span class="lbl"> 记住我</span>
														</label>

														<button id="loginButton" type="submit" class="width-35 pull-right btn btn-sm btn-primary" onclick="$('#loginform').submit();">
															<i class="ace-icon fa fa-key"></i>
															<span class="bigger-110">登录</span>
														</button>
													</div>

													<div class="space-4"></div>
												</fieldset>
											</form>

											<div class="social-or-login center">
												<span class="bigger-110">或者用其他方式登录</span>
											</div>

											<div class="space-6"></div>

											<div class="social-login center">
												<a class="btn btn-primary">
													<i class="ace-icon fa fa-facebook"></i>
												</a>

												<a class="btn btn-info">
													<i class="ace-icon fa fa-twitter"></i>
												</a>

												<a class="btn btn-danger">
													<i class="ace-icon fa fa-google-plus"></i>
												</a>
											</div>
										</div><!-- /.widget-main -->

										<div class="toolbar clearfix">
											<div>
												<a href="#" data-target="#forgot-box" class="forgot-password-link">
													<i class="ace-icon fa fa-arrow-left"></i>
													忘记密码
												</a>
											</div>

											<div>
												<a href="#" data-target="#signup-box" class="user-signup-link">
													注册
													<i class="ace-icon fa fa-arrow-right"></i>
												</a>
											</div>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.login-box -->

								<div id="forgot-box" class="forgot-box widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header red lighter bigger">
												<i class="ace-icon fa fa-key"></i>
												密码找回
											</h4>

											<div class="space-6"></div>
											<p>
												输入您的邮箱来找回账号信息
											</p>

											<form action="" method="get" id="pwdBackForm" name="pwdBackForm">
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input id="emailback" type="email" class="form-control" placeholder="Email" />
															<i class="ace-icon fa fa-envelope"></i>
														</span>
													</label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<button id="forgetPwdButton" type="button" class="width-35 pull-right btn btn-sm" style="float: right;">获取验证码</button>
															<input id="forgetPwdCode" type="text" class="form-control" style="width:60%;" placeholder="验证码" />
															<i class="ace-icon fa fa-envelope" style="right: 120px;"></i> 
														</span>
													</label>
													
													<span id="pwdError"></span>
													<div class="clearfix" style="text-align: center;">
														<button id="pwdButton" type="button" class="width-35 btn btn-sm btn-danger" th:onclick="'submitPwdBack()'">
															<i class="ace-icon fa fa-lightbulb-o"></i>
															<span class="bigger-110">发给我!</span>
														</button>
													</div>
												</fieldset>
											</form>
										</div><!-- /.widget-main -->

										<div class="toolbar center">
											<a href="#" data-target="#login-box" class="back-to-login-link">
												返回登录
												<i class="ace-icon fa fa-arrow-right"></i>
											</a>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.forgot-box -->

								<div id="show-box" class="forgot-box widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header red lighter bigger">
												<i class="ace-icon fa fa-key"></i>
												密码找回
											</h4>

											<div class="space-6"></div>
											<p id="showtext">
												
											</p>
										</div><!-- /.widget-main -->

										<div class="toolbar center">
											<a href="#" data-target="#login-box" class="back-to-login-link">
												返回登录
												<i class="ace-icon fa fa-arrow-right"></i>
											</a>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.show-box -->

								<div id="signup-box" class="signup-box widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header green lighter bigger">
												<i class="ace-icon fa fa-users blue"></i>
												新用户注册
											</h4>

											<div class="space-6"></div>
											<p> 开始输入您的详细信息: </p>

											<form action="" method="post" id="registForm">
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="email" id="email" name="email" class="form-control" placeholder="Email" />
															<i class="ace-icon fa fa-envelope"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" id="username" name="username" class="form-control" placeholder="用户名" />
															<i class="ace-icon fa fa-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" id="password" name="password" class="form-control" placeholder="密码" />
															<i class="ace-icon fa fa-lock"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" id="cpassword" name="cpassword" class="form-control" placeholder="确认密码" />
															<i class="ace-icon fa fa-retweet"></i>
														</span>
													</label>

													<label class="block">
														<input type="checkbox" class="ace" name="accept" id="accept"/>
														<span class="lbl">
															我接受
															<a href="javascript:void(0);" th:onclick="'showUserItem();'">用户条款</a>
														</span>
													</label>
													<span id="registError"></span>
													<div class="space-24"></div>

													<div class="clearfix">
														<button type="reset" class="width-30 pull-left btn btn-sm">
															<i class="ace-icon fa fa-refresh"></i>
															<span class="bigger-110">重置</span>
														</button>

														<button id="registButton" type="button" class="width-65 pull-right btn btn-sm btn-success" th:onclick="'submitRegist()'">
															<span class="bigger-110">注册</span>
															<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
														</button>
													</div>
												</fieldset>
											</form>
										</div>

										<div class="toolbar center">
											<a href="#" data-target="#login-box" class="back-to-login-link">
												<i class="ace-icon fa fa-arrow-left"></i>
												返回登录
											</a>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.signup-box -->
								
								<div id="regist-box" class="signup-box widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header green lighter bigger">
												<i class="ace-icon fa fa-users blue"></i>
                                                新用户注册
											</h4>

											<div class="space-6"></div>
											<p> 我们已经给你的相关邮箱发送确认邮件，请从邮件中点击激活账号，来配置您的相关信息。 </p>
										</div>

										<div class="toolbar center">
											<a href="#" data-target="#login-box" class="back-to-login-link">
												<i class="ace-icon fa fa-arrow-left"></i>
												返回登录
											</a>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.signup-box -->
								
							</div><!-- /.position-relative -->
						</div>
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->
        <div th:replace="common/layer"></div>
        <script th:replace="common/buttom"></script>
		<script type="text/javascript">
			$(function() {
				$('body').attr('class', 'login-layout blur-login');
				$('#id-text2').attr('class', 'white');
				$('#id-company-text').attr('class', 'light-blue');
				
				$(document).on('click', '.toolbar a[data-target]', function(e) {
					e.preventDefault();
					var target = $(this).data('target');
					$('.widget-box.visible').removeClass('visible');//hide others
					$(target).addClass('visible');//show target
				});
			});
			
			$("#forgetPwdButton").on("click", function(){
				$.ajax({
					url: '/getVerifyCode',
					type: "post",
					data: {"email": $("#emailback").val()},
					dataType: "json",
					success: function (data) {
						if(data.success){
							$("#pwdError").text("");
							$("#forgetPwdButton").text(data.msg + "秒");
							$("#forgetPwdButton").attr("disabled", true); 
							jump(parseInt(data.msg));
						}else{
							$("#pwdError").text(data.msg);
						}
					}
				});
			});
			
			function jump(count) { 
				window.setTimeout(function(){ 
					count--; 
					if(count > 0) { 
						$('#forgetPwdButton').text(count + "秒"); 
						jump(count); 
					} else { 
						$('#forgetPwdButton').text("获取验证码");
						$("#forgetPwdButton").attr("disabled", false); 
					} 
				}, 1000); 
			} 
			
			function submitPwdBack(){
				$.ajax({
					url: '/pwdBack',
					type: "post",
					data: {"email": $("#emailback").val(), "forgetPwdCode": $("#forgetPwdCode").val()},
					dataType: "json",
					success: function (data) {
						if(data.success){
							$("#pwdError").text("");
							$('.widget-box.visible').removeClass('visible');//hide others
							$("#show-box").addClass('visible');//show target
							$("#showtext").text(data.msg);
						}else{
							//showTip('tip', data.msg, 4000);
							$("#pwdError").text(data.msg);
						}
					}
				});
			}
			
			function submitRegist(){
				if($('#accept').is(':checked')) {
					$.ajax({
						url: '/regist',
						type: "post",
						data: $('#registForm').serialize(),
						dataType: "json",
						success: function (data) {
							if(data.success){
								$('.widget-box.visible').removeClass('visible');//hide others
								$("#regist-box").addClass('visible');//show target
							}else{
								$("#registError").text(data.msg);
								
							}
						}
					});
				}else{
					$("#registError").text("请接收用户条款");
				}
			}
		</script>
	</body>
</html>
